<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Keywords" content="">
	<meta name="description" content="">
    <title>后台首页</title>
    <link rel="shortcut icon" type="image/x-icon" href="skin/images/favicon.ico">
    <!--公共部分-->
    <link href="skin/css/layout.css" type="text/css" rel="stylesheet" />
	<script src="skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <!--私有部分-->
    <link href="skin/css/frame.style.css" type="text/css" rel="stylesheet" />
	<script src="skin/js/default.common.js" type="text/javascript"></script>
    <link href="skin/css/default.style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
	<!--star left-->
	<div class="column">
		<script type="text/javascript">
        $(".column").load("public_html/column.html");
        </script>
    </div>
    <div id="ContMianBox">

        <!--star子栏目-->
        <div class="sub-colum">
            <div class="tit">商品管理</div>
            <ul>
                <li class="curr"><a href="#" onClick="$('.cetContent').load('public_html/商品库.htm'), function () {return false;}">商品库</a></li>
                <li><a href="#" onClick="$('.cetContent').load('public_html/商品分组.htm'), function () {return false;}">商品分组</a></li>
                <li><a href="#" onClick="$('.cetContent').load('public_html/分销市场.htm'), function () {return false;}">分销市场</a></li>
            </ul>
        </div>
        <!--end子栏目-->
        <!--end left-->
        <div class="container narrow">
            <!--star conter-->
            <div class="cetContent">
                <div class="tit p-lr20">
                    <a class="c-40d064" href="#">商品库</a><em class="p-lr10 c-CCCCCC fs12">/</em><em>发布商品</em>
                </div>
                <!--star内容区域-->
                <div class="mainScroll">
                    <div class="mainContainer line-all">
                        <ul class="ui-nav-tab wList33">
                            <li class="js-step-1"><a href="javascript:;">1.选择商品品类</a></li>
                            <li class="js-step-2"><a href="javascript:;">2.编辑基本信息</a></li>
                            <li class="js-step-3 active"><a href="javascript:;">3.编辑商品详情</a></li>
                        </ul>
                        <div class="tabMainCont">
                            <!--star 选择商品品类-->
                            <div class="tabItem step-01 hide"> 
                                <!--star-->
                                <div class="line-all tac" style="padding:50px;">
                                    <span>选择商品品类</span>
                                </div>
                                <!--end-->
                            </div>                
                            <!--end 选择商品品类-->
                            <!--star 编辑基本信息-->
                            <div class="tabItem step-02 hide"> 
                                <!--star-->
                                <div class="line-all tac" style="padding:50px;">
                                    <span>编辑基本信息</span>
                                </div>
                                <!--end-->
                            </div>                
                            <!--end 编辑基本信息-->
                            <!--star 编辑商品详情-->
                            <div class="tabItem step-03">
                            	
                                <div class="app-design fix">
                                	<div class="app-preview">
                                    	<!--star 左侧内容-->
                                    	<div class="app-entry">
                                        	<!--star app-config-->
                                            <div class="app-config">
                                            
                                            	<div class="app-field" style="cursor: default;">
                                                	<h1><span></span></h1>
                                                    <div class="goods-details-block">
                                                        <h4>基本信息区</h4>
                                                        <p>固定样式，显示商品主图、价格等信息</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="js-config-region">
                                                	<div class="app-field fix editing">
                                                    	<!--star 内容-->
                                                    	<div class="control-group">
                                                        	<!--star默认-->
                                                        	<div class="goods-details-block" style="background:#FFF;">
                                                                <h4>商品详情区</h4>
                                                                <p>点击进行编辑</p>
                                                            </div>
                                                        	<!--end默认-->
                                                        	<!--star输入的时候-->
                                                        	<div class="custom-richtext hide">输入内容的时候</div>
                                                        	<!--end输入的时候-->
                                                        </div>
                                                        <!--end 内容-->
                                                        <!--star 辅助提示-->
                                                        <div class="actions">
                                                        	<div class="actions-wrap">
                                                                <span class="action edit">编辑</span>
                                                            </div>
                                                        </div>
                                                        <!--end 辅助提示-->
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        	<!--end app-config-->
                                            <!--star 添加内容位置-->
                                            <div class="app-fields js-fields-region">
                                            	<div class="app-fields ui-sortable">
                                                	<!--star-->
                                                    <div class="app-field fix">
                                                    	<div class="control-group">
                                                        	<div class="custom-notice"><div class="custom-notice-inner"><div class="custom-notice-scroll"><span>公告：<em class="is">请填写内容，如果过长，将会在手机上滚动显示</em></span></div></div></div>
                                                        </div>
                                                        <!--star 辅助提示-->
                                                        <div class="actions">
                                                        	<div class="actions-wrap">
                                                                <span class="action edit">编辑</span>
                                                            	<span class="action add">加内容</span>
                                                            	<span class="action delete" onClick="JSdelete(this);">删除</span>
                                                            </div>
                                                        </div>
                                                        <!--end 辅助提示-->
                                                    </div>
                                                	<!--end-->
                                                	<!--star-->
                                                    <div class="app-field fix">
                                                    	<!--star 内容-->
                                                    	<div class="control-group">
                                                            <ul class="sc-goods-list fix">
                                                                <li class="goods-card default-goods">
                                                                <a href="javascript: void(0);" class="link js-goods fix">
                                                                    <div class="photo-block" style="background:#81d5fa;">
                                                                        <span>第一个商品</span>
                                                                    </div>
                                                                    <div class="info">
                                                                        <span class="goods-price">￥9999.00</span>
                                                                    </div>
                                                                    <div class="goods-buy"></div>
                                                                </a>
                                                                </li>
                                                                <li class="goods-card default-goods">
                                                                <a href="javascript: void(0);" class="link js-goods fix">
                                                                    <div class="photo-block" style="background:#ff7ec4;">
                                                                        <span>第二个商品</span>
                                                                    </div>
                                                                    <div class="info">
                                                                        <span class="goods-price">￥9999.00</span>
                                                                    </div>
                                                                    <div class="goods-buy"></div>
                                                                </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!--end 内容-->
                                                        <!--star 辅助提示-->
                                                        <div class="actions">
                                                        	<div class="actions-wrap">
                                                                <span class="action edit">编辑</span>
                                                            	<span class="action add">加内容</span>
                                                            	<span class="action delete" onClick="JSdelete(this);">删除</span>
                                                            </div>
                                                        </div>
                                                        <!--end 辅助提示-->
                                                    </div>
                                                	<!--end-->
                                            	</div>
                                            </div>
                                            <!--end 添加内容位置-->
                                        </div>
                                    	<!--end 左侧内容-->
                                        <!--star左侧添加内容区域-->
                                        <div class="js-add-region">
                                        	<div class="app-add-field">
                                            	<h4>添加内容</h4>
                                                <ul>
                                                	<li><a class="js-new-field" data-field-type="goods">商品</a></li>
                                                	<li><a class="js-new-field" data-field-type="image_ad">图片<br>广告</a></li>
                                                	<li><a class="js-new-field" data-field-type="notice">公告</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!--end左侧添加内容区域-->
                                    </div>
                                    <!--star 右边-->
                                    <div class="app-sidebar">
                                    	<div class="arrow"></div>
                                    	<div class="app-sidebar-inner">
                                            <form class="form-horizontal">
                                            	<div class="control-group goods-sidebar-sub-title" data-name="default">
                                                    <label class="control-label p-l20">编辑内容：</label>
                                                    <div class="c fix p-t20">
                                                    	<textarea class="input-sub-title" name="textarea"></textarea>
                                                    </div>
                                                </div>
                                                <div class="control-group hide" data-name="notice">
                                                    <label class="control-label">公告：</label>
                                                    <div class="controls">
                                                        <input name="content" value="" class="input-xxlarge" placeholder="请填写内容，如果过长，将会在手机上滚动显示" type="text">
                                                    </div>
                                                </div>
                                                <div class="control-group hide options" data-name="image_ad">
                                                    <a href="javascript:void(0);" class="add-option js-add-option btn_file"><i class="icon-add"></i> 添加一个广告<input type="file"/></a>
													<div class="choiceImg">
                                                    	<img src="">
                                                    </div>
                                                </div>
                                                <div class="control-group hide" data-name="goods">
                                                    <label class="control-label p-l20">选择商品：</label>
                                                    <div class="controls">
                                                        <ul class="module-goods-list fix" name="goods">
                                                            <!--<li class="sort">
                                                            	<a href="https://h5.koudaitong.com/v2/showcase/goods?alias=2xk4k3ocmu6ba"><img src="https://img.yzcdn.cn/upload_files/2015/05/14/Fq9Xi4vSuS8D804oC_1CD04sb8uA.png" alt="商品图" width="50" height="50"></a>
                                                            	<a class="close-modal small" onClick="JSremove(this);" title="删除">×</a>
                                                            </li>
                                                            <li class="sort">
                                                            	<a href="https://h5.koudaitong.com/v2/showcase/goods?alias=2xk4k3ocmu6ba"><img src="https://img.yzcdn.cn/upload_files/2015/05/14/Fq9Xi4vSuS8D804oC_1CD04sb8uA.png" alt="商品图" width="50" height="50"></a>
                                                            	<a class="close-modal small" onClick="JSremove(this);" title="删除">×</a>
                                                            </li>-->
                                                            <li>
                                                                <a href="javascript:void(0);" class="add-goods" onClick="JSaddGoods(this);"><i class="icon-add"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <!--end 右边-->
                                </div>
                                
                                <!--star-->
                                <div class="line-all tac" style="padding:50px; display:none;">
                                    <span>编辑商品详情ddd</span>
                                </div>
                                <!--end-->
                            </div>                
                            <!--end 编辑商品详情-->
                        </div>
                        
                    </div>
                </div>
                <!--end内容区域-->
            </div>
            <!--end conter-->
        </div>
    </div>
</div>

<script type="text/javascript">
//通用定义
var $this;
var n = 130;
var conFirst = $('.app-config .js-config-region .app-field');
var sortable = '.ui-sortable';
var appd = '.app-field';
var popover = '.ui-popover';
var curr = 'editing';
var sidebar = $('.app-sidebar');
var textEm = '.editing .custom-notice-scroll span em';

//左边定义
var htmloperation = '';
var htmluipop = '';//弹出删除框
var htmluporp = '';//弹框
var hl_goodsli = '';
var htmlgoods = '';//商品
var htmlnotice = '';//公告
var htmlimage_ad = '';//图片广告


//取消
function JScancel(){
	$(appd).removeClass('select-app');
	$(popover).remove();
}

//确定
function JSsave(objthis){
	//确定删除成功后，上一个产品选择
	var $this = $(objthis);
	var pts = $this.parents(appd);//获取上一级元素
	var bprev = pts.prev(appd);//获取上一级元素的上一个
	var bnext = pts.next(appd);//获取上一级元素的下一个
	
	var $this = $(sortable).find(appd);
	if($this.hasClass(curr)){
		if(bprev.length < 1 || bnext.length < 0){
			var pX = conFirst.offset().top;
			var pH = conFirst.outerHeight();
			sidebar.css({marginTop:0});
			conFirst.addClass(curr);
			$(sortable).find(appd).removeClass(curr);
			//console.debug("如果有下一级并且没有上一级：赋值给下一级");
		}else {
			var pX = bprev.offset().top;
			var pH = bprev.outerHeight();
			sidebar.css({marginTop:pX - n});
			bprev.addClass(curr).siblings().removeClass(curr);
		}
	}else{
		var pX = conFirst.offset().top;
		var pH = conFirst.outerHeight();
		sidebar.css({marginTop:0});
		conFirst.addClass(curr);
	}
	
	$(".select-app").remove();
	$(popover).remove();
	JSclass();
	
	$(sidebar).find('.form-horizontal .control-group').attr('data-name',function(){
		var attr = $(this).attr('data-name');
		if(attr != 'default'){
			$(this).hide();
		}else{
			$(this).show();
		}
	});
	
	conGroup();//判断右边左边对应显示
	chImg();//广告图片点击左右对于
}
//删除
function JSdelete(objthis){
	//动作
	$(objthis).parents(appd).append(htmluipop).addClass('select-app').siblings().removeClass('select-app');
	$('body').bind('click', function(e){//判断确定删除的弹框，没做动作的时候点击消失
		if($("div").hasClass("ui-popover")){
			var ev = $(e.target);
			if(!ev.is(popover) && !ev.is('.ui-popover-inner') && !ev.is('.ttSSont') && !ev.is('.delete')){
				$(popover).remove();
			}
		}
	});

}

//自动计算右侧弹出的位置
function JSoffset(objthis){
	var $this = $(objthis);
	var X = $this.offset().top;//当前点击的位置
	var pH = $this.outerHeight();//当前点击的高度
	sidebar.css({marginTop:X - n});
}

//弹框动作
function JSpoup(){
	$(".u_tipBackground,.u_tipWindow").show();
	$(".tip_close").bind('click', function(){
		$(".u_tipBackground,.u_tipWindow").remove();
	});
}

//选取取消动作
function HTsortli(objthis){
	var $this = $(objthis);
	if(!$this.hasClass('zent-btn-primary')){
		$this.html('取消').addClass('zent-btn-primary');
		$('.u_tipWindow .mb .js-confirm-choose').show();
	}else{
		$this.html('选取').removeClass('zent-btn-primary');
		var ubtn = $this.parents('li').siblings().find('.u-opts a');
		if(!ubtn.hasClass('zent-btn-primary')){
			$('.u_tipWindow .mb .js-confirm-choose').hide();
		}
	}
}
//
function JSappendPro(){	
	var $this = $(sortable).find(appd);
	$this.attr('class', function(){
		
		var $pimg = $('.proListImg').find('li');
		var index = $pimg.find('.u-opts a.zent-btn-primary').parents('.u-opts').siblings('.u-image').find('img');
		var sortli = '';
		var goodsli = ''
		for(i=0; i<index.length; i++){
			var img = index[i].src;
			var alt = index[i].alt;
			var price = $(index[i]).attr('price');
			sortli += '<li class="sort">';
				sortli += '<a><img src="'+img+'" alt="'+alt+'" price="'+price+'" width="50" height="50"></a>';
				sortli += '<a class="close-modal small" onclick="JSremove(this);" title="删除">×</a>';
			sortli += '</li>';
			
			goodsli += '<li class="goods-card"><a href="javascript: void(0);" class="link js-goods fix">';
				goodsli += '<div class="photo-block"><img src="'+img+'"></div>';
				goodsli += '<div class="info"><span class="goods-price">￥'+price+'</span></div>';
				goodsli += '<div class="goods-buy"></div>';
			goodsli += '</a></li>';
		}
		
		//判断是否当前选中状态
		var atclass = $(this).attr('class');
		if(atclass == 'app-field fix editing'){
			$('.module-goods-list').prepend(sortli);
			//console.log(sortli)
			$(sortable).find('.editing .sc-goods-list li').remove('.default-goods');
			$(sortable).find('.editing .sc-goods-list').append(goodsli);
			//赋值给对应的商品
			var sortli = $('.module-goods-list').find('li.sort');
			var goodsli = $(sortable).find('.editing .sc-goods-list li');
			sortli.each(function(i ,e){
				$(this).attr("attr-number", +i);
			});
			goodsli.each(function(i ,e){
				$(this).attr("attr-number", +i);
			});
		}
	});
	$(".u_tipBackground,.u_tipWindow").remove();
	JSmouseli();//经过动作

}

//鼠标经过的地方
function JSmouseli(){
	var li = $('.module-goods-list').find('li.sort');
	li.bind('mouseenter' ,function(){
		$(this).find('.close-modal').show();	
	}).bind('mouseleave', function(){
		$(this).find('.close-modal').hide();	
	});	
}

//添加选中商品
function JSaddGoods(objthis){
	var $this = $(objthis);
	var li = $('.module-goods-list').find('li.sort');
	var proList = ''
	proList += '<ul class="proListImg">';
	var arrImg = [
			'https://img.yzcdn.cn/upload_files/2016/10/12/FtQzezqDBktIKagcWkpz6JzM2Z-k.jpg',
			'https://img.yzcdn.cn/upload_files/2015/05/14/Fq9Xi4vSuS8D804oC_1CD04sb8uA.png',
			'https://img.yzcdn.cn/upload_files/2015/05/14/Fh1ZR74CpUm0s85svgQuU-MQ3oQd.png'
	]
	var arrName = [
			'【福利】等蜂来蜂蜜 | 四川金堂田园蜜',
			'实物商品（购买时需填写收货地址，测试商品，不发货，不退款）',
			'虚拟商品（购买时无需填写收货地址，测试商品，不发货，不退款）'
	]
	var arPrice = [
			'80',
			'125',
			'56'
	]
	for(var i = 0; i < arrImg.length; i++){
		proList += '<li>';
		proList += '<div class="u-image"><img src="'+arrImg[i]+'" alt="'+arrName[i]+'" price="'+arPrice[i]+'"></div>';
		proList += '<div class="u-title"><a href="">'+arrName[i]+'</a></div>';
		proList += '<div class="u-opts"><a href="javascript:;" class="zent-btn" onclick=HTsortli(this);>选取</a></div>';
		proList += '</li>';
	}
	proList += '</ul>';
	var times = li.length;
	if(times<50){//限制添加商品的次数
		$('body').append(htmluporp);
	}
	$('.u_tipWindow .mc').append(proList);
	var pimg = $('.proListImg').find('li').length;
	$('.total span').html(pimg);
	JSpoup();//弹出
}

//点击添加广告位
function JSaddImage(objthis){
	var $this = $(objthis);
}


//选取商品点击叉叉按钮移除对应的attr值
function JSremove(objthis){
	var $this = $(objthis);
	var atsortli = $this.parents('li');
	atsortli.remove();
	var $index = $(sortable).find(appd);
	$index.attr('class', function(){
		var atclass = $(this).attr('class');
		if(atclass == 'app-field fix editing'){
			var atgoodsli = $(sortable).find('.editing .sc-goods-list li');
			//console.log(atgoodsli.length);
			atgoodsli.each(function(){
				$(this).attr('attr-number', function(){
					if($(this).attr('attr-number')==atsortli.attr('attr-number')){
						$(this).remove();
					}
				})
			});
			if(atgoodsli.length<=1){
				$(sortable).find('.editing .sc-goods-list').append(hl_goodsli);
			}
		}
	});
}

//右边的data-name等于谁
function data_goods(nameVal){
	$(sidebar).find('.form-horizontal .control-group').attr('data-name',function(){
		var attr = $(this).attr('data-name');
		//console.log(nameVal)
		if(attr != nameVal){
			$(this).hide();
		}else{
			$(this).show();
		}
	})
}

//判断右边左边对应显示
function conGroup(){
	var $this = $(sortable).find(appd);
	$this.attr('class', function(){
		var atclass = $(this).attr('class');
		if(atclass == 'app-field fix editing'){
			var cfind = $(sortable).find('.editing .control-group').children();
			cfind.attr('class', function(){
				/*文本输入data-name=goods的商品状态*/
				if($(this).attr('class') == 'sc-goods-list fix'){
					data_goods('goods');
				};
				/*文本输入data-name=image_ad的图片广告状态*/
				if($(this).attr('class') == 'custom-image-swiper'){
					data_goods('image_ad');
				};
				/*文本输入data-name=notice的公告状态*/
				if($(this).attr('class') == 'custom-notice'){
					data_goods('notice');
				};
			});
		}
	});
}

//第一显示对应的内容
function conFirst(){
}
//点击移除与添加当前选中
function JSclass(){
	var $this = $(sortable).find(appd);
	$this.each(function(ojbthis){
		$this.bind('click', function(event){
			var ev = $(event.target);
			if(!ev.is('.delete')){
				goodsCard();//选中商品时左右两边的状态
				$(this).addClass(curr).siblings().removeClass(curr);
				$('.app-config .app-field').removeClass(curr);
				
				$this.attr('class', function(){
					var atclass = $(this).attr('class');
					if(atclass == 'app-field fix editing'){
						var cfind = $(sortable).find('.editing .control-group').children();
						cfind.attr('class', function(){
							/*文本输入data-name=goods的商品状态*/
							if($(this).attr('class') == 'sc-goods-list fix'){
								data_goods('goods');
							};
							/*文本输入data-name=image_ad的图片广告状态*/
							if($(this).attr('class') == 'custom-image-swiper'){
								data_goods('image_ad');
							};
							/*文本输入data-name=notice的公告状态*/
							if($(this).attr('class') == 'custom-notice'){
								data_goods('notice');
							};
						});
					}
				});
				//conGroup();//判断右边左边对应显示
				
				//点击获取左边的值到右边
				var thisContent = $('input[name="content"]');
				if($(this).hasClass('editing')){
					if(!$(textEm).hasClass('is')){
						thisContent.val($(textEm).text());
					}else{
						thisContent.val('');	
					}
				}
				
				editText();//文本输入
				JSoffset(this);//计算右边的位置
			}
			
			//广告图片点击左右对于
			chImg();
		});
	})
	conFirst.click(function(){
		$(this).addClass(curr);
		$(sortable).find(appd).removeClass(curr);
		
		$(sidebar).find('.form-horizontal .control-group').attr('data-name',function(){
			var attr = $(this).attr('data-name');
			if(attr != 'default'){
				$(this).hide();
			}else{
				$(this).show();
			}
		});
		//conGroup();//判断右边左边对应显示
		editTextarea();
		sidebar.css({marginTop:0});
	});
	//conGroup();//判断右边左边对应显示
	editText()
	editTextarea();
}

function goodsCard(){
	//判断是否当前选中状态
	var $this = $(sortable).find(appd);
	var atclass = $this.attr('class');
	var goodsli = $(sortable).find('.editing .sc-goods-list li');
	//console.log(goodsli)
	if(!goodsli.hasClass('default-goods')){
		var index = goodsli.find('img');
		var sortli = '';
		//console.log(goodsli.attr('attr-number'));
		//console.log(sortli)
		for(i=0; i<index.length; i++){
			var img = index[i].src;
			var alt = index[i].alt;
			var liattr = goodsli.attr('attr-number');
			var price = $(index[i]).attr('price');
			sortli += '<li class="sort">';
				sortli += '<a><img src="'+img+'" alt="'+alt+'" price="'+price+'" width="50" height="50"></a>';
				sortli += '<a class="close-modal small" onclick="JSremove(this);" title="删除">×</a>';
			sortli += '</li>';
		}
		$('.module-goods-list').find('li.sort').remove();
		$('.module-goods-list').prepend(sortli);
		var sortli = $('.module-goods-list').find('li.sort');
		sortli.each(function(i ,e){
			$(this).attr("attr-number", +i);
		});
		JSmouseli();
	}else{
		$('.module-goods-list').find('li.sort').remove();
	}
		
}

//文本输入判断赋值
function editText(){
	var thisContent = $('input[name="content"]');
	
	//鼠标进入状态
	thisContent.bind('focus', function(){
		if($(this).val()==''){
			$(sortable).find(textEm).addClass('is').text('请填写内容，如果过长，将会在手机上滚动显示');	
		}else{
			$(sortable).find(textEm).removeAttr('is').text($(this).val());	
		}
	});
	//鼠标离开状态
	thisContent.bind('blur', function(){
		if($(this).val()==''){
			$(sortable).find(textEm).addClass('is').text('请填写内容，如果过长，将会在手机上滚动显示');	
		}else{
			$(sortable).find(textEm).removeAttr('class').text($(this).val());	
		}
	});
	$(sortable).find(textEm).text();
};
//textarea输入判断赋值
function editTextarea(){
	var thisTextarea = $('textarea[name="textarea"]');
	//刷新浏览器时如果为空或者不为空的状态
	/*if(thisTextarea.text()=='' && thisTextarea.val()==''){
		conFirst.find('.custom-richtext').hide().siblings('.goods-details-block').show();
	}else{
		conFirst.find('.custom-richtext').show().siblings('.goods-details-block').hide();
		conFirst.find('.custom-richtext').text(thisTextarea.val());
	}*/
	
	//判断商品详情区域是否存在编辑的内容
	var conVal = conFirst.find('.custom-richtext');
	var ct = conVal.text();
	if(conVal.is(':visible')){
		thisTextarea.val(ct);
	}else{
		thisTextarea.val('');	
	};
	function customArea(){
		if(thisTextarea.val()==''){
			conFirst.find('.custom-richtext').hide().siblings('.goods-details-block').show();	
		}else{
			conFirst.find('.custom-richtext').show().siblings('.goods-details-block').hide();
			conFirst.find('.custom-richtext').text(thisTextarea.val());
		}
	}
	//鼠标进入状态
	thisTextarea.bind('focus', function(){
		customArea();
	})
	//鼠标离开状态
	thisTextarea.bind('blur', function(){
		customArea();
	})
};

function chImg(){
	//广告图片点击左右对于
	var $img = $('.editing .custom-image-swiper img');
	var $chImg = $('.choiceImg img');
	var dataImg = $img.attr('src');
	$chImg.attr('src',dataImg);
	$('.choiceImg').show();
};

$(function(){
	JSclass();//启动点击选中
	JSmouseli();//初始化鼠标经过产品li上
	
	htmloperation += '<div class="actions-wrap">';
		htmloperation += '<span class="action edit">编辑</span><span class="action add">加内容</span><span class="action delete" onClick="JSdelete(this);">删除</span>';
	htmloperation += '</div>';
	
	//var htmluipop = '';//弹出删除框
	htmluipop += '<div class="ui-popover ui-popover--confirm left-center">';
		htmluipop += '<div class="ui-popover-inner fix">';
			htmluipop += '<div class="l tac ttSSont">确定删除？</div>';
			htmluipop += '<div class="r">';
				htmluipop += '<a href="javascript:;" class="zent-btn zent-btn-primary js-save" onClick="JSsave(this);">确定</a>';
				htmluipop += '<a href="javascript:;" class="zent-btn" onClick="JScancel(this);">取消</a>';
			htmluipop += '</div>';
		htmluipop += '</div>';
		htmluipop += '<div class="arrow"></div>';
	htmluipop += '</div>';

	//var htmluporp = '';//弹框
	htmluporp += '<div class="u_tipBackground u_bg2"></div>';
	htmluporp += '<div class="u_tipWindow u5">';
		htmluporp += '<div class="mt">标题<i class="tip_close">&times;</i></div>';
		htmluporp += '<div class="mc">';
			//htmluporp += '<div>内容</div>';
		htmluporp += '</div>';
		htmluporp += '<div class="mb"><div class="js-confirm-choose hide l"><input class="zent-btn zent-btn-primary" value="确定使用" type="button" onClick=JSappendPro(this);></div><div class="total tar">共 <span></span> 条，每页 8 条</div></div>';
	htmluporp += '</div>';
	
	//var htmlgoods = '';//商品
	var order = ['一','二','三','n'];
	var color = ['81d5fa','ff7ec4','ffbe32','ffbe32'];
	for(i=0; i<order.length; i++){
		hl_goodsli += '<li class="goods-card default-goods"><a href="javascript: void(0);" class="link js-goods fix">';
			hl_goodsli += '<div class="photo-block" style="background:#'+color[i]+'"><span>第'+order[i]+'个商品</span></div>';
			hl_goodsli += '<div class="info"><span class="goods-price">￥9999.00</span></div>';
			hl_goodsli += '<div class="goods-buy"></div>';
		hl_goodsli += '</a></li>';
	}
	
	htmlgoods += '<div class="app-field fix">';
		htmlgoods += '<div class="control-group">';
			htmlgoods += '<ul class="sc-goods-list fix">';
				htmlgoods += ''+hl_goodsli+'';
			htmlgoods += '</ul>';
		 htmlgoods += '</div>';
		 htmlgoods += '<div class="actions">'+htmloperation+'</div>';
	htmlgoods += '</div>';
	
	//var htmlimage_ad = '';//图片广告
	htmlimage_ad += '<div class="app-field fix">';
		htmlimage_ad += '<div class="control-group">';
			htmlimage_ad += '<div class="custom-image-swiper"><img class="preview" style="display: block;" src="https://img.yzcdn.cn/public_files/2015/10/28/aae1f435dfb5c908c9e86e0e52bc524c.jpg"></div>';
		htmlimage_ad += '</div>';
		htmlimage_ad += '<div class="actions">'+htmloperation+'</div>';
	htmlimage_ad += '</div>';
	
	//var htmlnotice = '';//公告
	htmlnotice += '<div class="app-field fix">';
		htmlnotice += '<div class="control-group">';
			htmlnotice += '<div class="custom-notice"><div class="custom-notice-inner">';
			htmlnotice += '<div class="custom-notice-scroll"><span>公告：<em class="is">请填写内容，如果过长，将会在手机上滚动显示</em></span></div>';
			htmlnotice += '</div></div>';
		htmlnotice += '</div>';
		htmlnotice += '<div class="actions">'+htmloperation+'</div>';
	htmlnotice += '</div>';

	var appli = $('.app-add-field').find('li a');
	appli.each(function(){
		$(this).bind('click', function(){
			var atr = $(this).attr('data-field-type');
			//添加商品
			if(atr=='goods'){
				$(sortable).append(htmlgoods);
				data_goods('goods');
				$('.module-goods-list').find('li.sort').remove();
			}
			//添加图片广告
			if(atr=='image_ad'){
				$(sortable).append(htmlimage_ad);
				data_goods('image_ad');
				//JSaddImage();
				$('.choiceImg').hide();
			}
			//添加公告
			if(atr=='notice'){
				$(sortable).append(htmlnotice);
				$('input[name="content"]').val('');
				data_goods('notice');
				editText();
			}
			function reEditing(){
				$('.app-config .app-field').removeClass(curr);
				$('.ui-sortable .app-field').addClass(curr).prev().removeClass(curr);
				JSoffset('.editing');
			}
			reEditing();//添加后绑定与移除状态
			JSclass();//点击移除与添加当前选中
		});
	});

	//点击添加广告图片
	$(".btn_file").change(function() {
		var $file = $(this).find('input');
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $('.editing .custom-image-swiper img');
		var $chImg = $('.choiceImg img');
		
		if(fileObj && fileObj.files && fileObj.files[0]){
			dataURL = windowURL.createObjectURL(fileObj.files[0]);
			$img.attr('src',dataURL).removeAttr('id');
		}else{
			dataURL = $file.val();
			var imgObj = $('.editing .custom-image-swiper img');
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
		 
		}
		var dataImg = $img.attr('src');
		$chImg.attr('src',dataImg);
		$('.choiceImg').show();
	});
})

</script>
</body>
</html>

